<template>
	<view class="main">
		<view class="list">
			<view class="border a">
				<view class="left" style="font-size: 28rpx;">
					手机号码
				</view>
				<view class="right">
					<input v-model="nickname" type="text" placeholder="请输入手机号码" />
				</view>
			</view>
			<view class="border a">
				<view class="left" style="font-size: 28rpx;">
					验证码
				</view>
				<view class="right"
					style="display: flex; align-items: center; justify-content: space-between; padding-right: 20rpx;">
					<input v-model="password" type="text" placeholder="请输入短信验证码" />
					<button class="getCodeBtn" :disabled="isSend" @tap="getCode">{{ text }}</button>
				</view>
			</view>
		</view>
		<view class="btn" @tap="confirm">
			确认修改
		</view>
	</view>
</template>

<script>
	import {
		user,
		makeSon,
		changePhone,
		send
	} from '@/api/index.js'

	export default {
		data() {
			return {
				info: {},
				username: '',
				nickname: '',
				password: '',
				isSend: false, // 默认禁止
				text: "发送验证码",
				totalTime: 60,
				timer: null, // 定时器
				oldPhone: ""
			}
		},
		onLoad() {
			this.getInfo()
		},

		methods: {
			async confirm() {
				if (this.nickname.length === 0) {
					uni.showToast({
						title: '请输入手机号码',
						icon: 'none'
					})
					return
				}

				if (this.password.length === 0) {
					uni.showToast({
						title: '请输入短信验证码',
						icon: 'none'
					})
					return
				}
				let res = await changePhone({
					mobile: this.nickname,
					captcha: this.password

				});
				console.log('手机号:', this.nickname);
				console.log('验证码:', this.password);
				console.log('res', res);

				if (res.code === 1) {
					uni.showToast({
						title: '修改成功',
						icon: 'none',
						duration: 1500,
						success: () => {
							setTimeout(() => {
								uni.navigateBack()
							}, 1000)
						}
					});
				} else {
					console.log(res.code);
					uni.showToast({
						title: '验证码不正确',
						icon: 'none'
					});
				}
			},
			async getInfo() {
				let res = await user()
				this.info = res.data
				this.oldPhone = res.data.mobile
			},

			async getCode() {
			    console.log('开始发送验证码');
			    const phoneRegex = /^1[3-9]\d{9}$/; 
			    if (!this.nickname) {
			        uni.showToast({
			            title: '请输入手机号码',
			            icon: 'none'
			        });
			        return;
			    }
			    if (!phoneRegex.test(this.nickname)) {
			        uni.showToast({
			            title: '请输入正确的手机号码',
			            icon: 'none'
			        });
			        return;
			    }
			    if (this.isSend) {
			        console.log('正在发送验证码，请勿重复点击');
			        return; 
			    }
			
			    if (this.oldPhone == this.nickname) {
			        uni.showToast({
			            title: '该手机号码已经被占用',
			            icon: 'none'
			        });
			        return;
			    }
			
			    this.isSend = true;
			    this.text = `${this.totalTime}s 后重新发送`;
			
			    this.timer = setInterval(() => {
			        this.totalTime--;
			        this.text = `${this.totalTime}s 后重新发送`;
			        if (this.totalTime <= 0) {
			            clearInterval(this.timer);
			            this.isSend = false;
			            this.text = "发送验证码";
			            this.totalTime = 60;
			        }
			    }, 2000);
			
			    try {
			        console.log('发送验证码请求:', { mobile: this.nickname, event: 'changemobile' });
			        const res = await send({
			            mobile: this.nickname,
			            event: 'changemobile'
			        });
			        console.log('服务器响应:', res);
			
			        if (res.code === 1) {
			            uni.showToast({
			                title: '验证码已发送',
			                icon: 'none'
			            });
			        } else {
			            uni.showToast({
			                title: res.msg || '验证码发送失败',
			                icon: 'none'
			            });
			           
			            clearInterval(this.timer);
			            this.isSend = false;
			            this.text = "发送验证码";
			            this.totalTime = 60;
			        }
			    } catch (err) {
			        console.error('验证码发送失败:', err);
			        uni.showToast({
			            title: '验证码发送失败，请稍后重试',
			            icon: 'none'
			        });
			        
			        clearInterval(this.timer);
			        this.isSend = false;
			        this.text = "发送验证码";
			        this.totalTime = 60;
			    }
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		min-height: 100vh;
		padding: 100rpx 30rpx;

		.list {
			.border {
				padding-bottom: 30rpx;
				border-bottom: 2rpx solid #000;
				margin-bottom: 30rpx;

				&.a {
					display: flex;
					align-items: center;

					.left {
						width: 22%;
						font-size: 28rpx;

					}

					.right {
						flex: 1;
						font-size: 28rpx;
					}
				}
			}

			.getCodeBtn {
				font-size: 28rpx;
				width: 240rpx;
				background-color: #EA504F; // 默认背景颜色
				color: #fff; // 文字颜色
				// border-radius: 200rpx;
				padding: 5rpx 5rpx;
				border: none;
				cursor: pointer;

				&[disabled] {
					background-color: #ccc; // 禁用时的背景颜色
					color: #666; // 禁用时的文字颜色
					cursor: not-allowed; // 鼠标指针变为禁止图标
				}
			}
		}

		.btn {
			width: 100%;
			padding: 30rpx;
			text-align: center;
			color: #fff;
			background-color: #EA504F;
			border-radius: 10rpx;
			margin-top: 40rpx;
		}
	}
</style>